.anchorTooltipNode {
  width: 100%;
  height: 42px;
  display: flex !important;
  position: relative;
  align-items: center;
}

.nodeContainer {
  border-left: 3px solid transparent;

  &:hover {
    background-color: var(--browserComponentActive);
  }
}

.nodeRowEven {
  background-color: var(--browserTableRowEven);
}

.nodeContent {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 16px;
  color: var(--euiTextSubduedColor) !important;
  align-items: center;
  font:
    normal normal normal 13px/28px Graphik,
    sans-serif !important;
  letter-spacing: -0.13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 100%;

  &Open {
    color: var(--euiColorFullShade) !important;
  }

  :global(.moveOnHoverKey) {
    transition: transform ease 0.3s;
    &:global(.hide) {
      transform: translateX(-8px);
    }
  }
  :global(.showOnHoverKey) {
    display: none !important;
    &:global(.show) {
      display: flex !important;
    }
  }

  &:hover {
    :global(.moveOnHoverKey) {
      transform: translateX(-8px);
    }
    :global(.showOnHoverKey) {
      display: flex !important;
    }
  }
}

.nodeSelected {
  border-left-color: var(--euiColorPrimary) !important;
  background-color: var(--browserComponentActive) !important;

  .nodeContent {
    color: var(--euiColorFullShade) !important;
  }
}

.nodeIcon {
  margin-right: 8px;

  &Arrow {
    margin-left: 8px;
    margin-right: 6px;
    width: 10px !important;
    height: 10px !important;
  }

  &Leaf {
    margin-left: 25px;
    margin-bottom: 2px;
    width: 14px;
    height: 14px;
  }
}

.approximate,
.keyCount {
  display: inline-block;
}

.options {
  padding-left: 12px;
  font-size: 12px;
  font-weight: 300;
}

.keyType {
  padding-right: 16px;
  padding-left: 12px;
  width: 126px;
  min-width: 126px;
}

.keyName,
.nodeName {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;

  :global(.euiTextColor) {
    max-width: 100%;
  }
}

.keyTTL,
.approximate {
  width: 86px;
  min-width: 86px;
  text-align: right;
}

.keySize,
.keyCount {
  width: 90px;
  min-width: 90px;
  text-align: right;
}

.keyInfoLoading {
  margin-top: 8px;
  padding-left: 16px;
}

.deletePopover {
  max-width: 400px !important;
}
